<template>
    <div id="mains">
        <div class="topInput">
            <div class="topBox topbtn">
                <div class="topbtnInner">
                    <el-button type="primary" @click="addnewinfo">新增</el-button>

                    <el-dialog title="部门管理" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="部门名称" :label-width="formLabelWidth">
                                <el-input v-model="form.startTime" ref="time" autocomplete="on"></el-input>
                            </el-form-item>
                            <el-form-item label="部门描述" :label-width="formLabelWidth">
                                <el-input v-model="form.endTime" ref="description" autocomplete="on"></el-input>
                            </el-form-item>
                            <el-form-item label="创建时间" :label-width="formLabelWidth">
                                <el-input v-model="form.hours" ref="shijian" autocomplete="on"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addsector">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </div>

        <div class="tables">
            <div id="app">
                <div class="innerTable">
                    <el-table
                            :header-cell-style="rowClass"
                            :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
                            border
                            @selection-change="handleSelectionChange"
                            style="width: 100%;margin:0 auto;text-align:center;"
                    >
                        <el-table-column prop="id" align="center" label="部门ID" min-width="30%"></el-table-column>
                        <el-table-column prop="name" align="center" label="部门名称" min-width="30%"></el-table-column>
                        <el-table-column prop="description" align="center" label="部门描述" min-width="30%"></el-table-column>
                        <el-table-column prop="createTime" align="center" label="创建时间" min-width="30%"></el-table-column>

                        <el-table-column align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input @change="chazhao" ref="editsousuo"
                                          prefix-icon="iconfont icon-sousuo"
                                          v-model="searchTableInfo"
                                          placeholder="请输入搜索内容"
                                          style="width:240px"
                                ></el-input>
                            </template>
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 编辑详情模态框 -->
                <el-dialog title="编辑详情" :visible.sync="dialogdetails" v-if="dialogdetails">
                    <el-form :model="dialogdetailsInfo">
                        <el-form-item label="部门ID" :label-width="formLabelWidth">
                            <el-input :disabled="true" v-model="dialogdetailsInfo.id" ref="eidtid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="部门名称" :label-width="formLabelWidth">
                            <el-input v-model="dialogdetailsInfo.date" ref="editname" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="部门描述" :label-width="formLabelWidth">
                            <el-input v-model="dialogdetailsInfo.endTime" ref="editdescription" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间" :label-width="formLabelWidth">
                            <el-input v-model="dialogdetailsInfo.hours" ref="edittime" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogdetails = false">取 消</el-button>
                        <el-button type="primary" @click="addedit">确 定</el-button>
                    </div>
                </el-dialog>

                <!-- 分页 -->
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        class="user-list-page"
                        :total="tableData.length"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mains",
        data() {
            return {
                tableData:[],
                dialogdetails: false,
                dialogdetailsInfo: {},
                searchTableInfo: "",
                pagesize: 6,
                currpage: 1,
                getSearchInfo: [],
                formLabelWidth: "120px",
                dialogFormVisible: false,
                inputState: true,
                showText: "收起",
                iconShow1: true,
                iconShow2: false,
                currentPage: 1,
                size: 5,
                form: {
                    startTime: "",
                    endTime: "",
                    why: "",
                    hours: "",
                    seeMan: "",
                    sendMan: "",
                    who:"",
                    name:""
                },
                search: "",
            };
        },
        methods: {

            //编辑按钮
            addedit(){
                this.dialogdetails = false;
                let that = this
                let arr ={
                    id:that.$refs.eidtid.value,
                    name:that.$refs.editname.value,
                    description:that.$refs.editdescription.value,
                    createTime:that.$refs.edittime.value
                }
                console.log(arr)
                //获取IP，端口号和接口名
                let url = "/api/updateDept"
                // let data ={epmid:7}
                //请求到后端
                that.$axios({
                    method:"post",
                    url:url,
                    data:JSON.stringify(arr)
                })
                    .then((res)=>{
                        that.tableData.push(res.data.data)
                        this.info()
                    })
            },

            //新增确定按钮
            //获取当前输入数据
            addsector(){
                this.dialogFormVisible = false
                let that =this
                let data = {
                    name:that.$refs.time.value,
                    description:that.$refs.description.value,
                    createTime:that.$refs.shijian.value
                }
                console.log(data)
                //获取IP，端口号和接口名
                let url = "/api/addDept"
                //发送请求给后端
                this.$axios({
                    method:"post",
                    url:url,
                    data:JSON.stringify(data)
                })
                    .then((res)=>{
                        // console.log(res)
                        this.tableData.push(res.data.data)
                    })
            },
            //新增按钮
            addnewinfo(){
                this.dialogFormVisible = true
            },

            //删除按钮
            handleDelete(index, row) {
                let that =this
                let url = "/api/delDept"
                let data = {
                    id:row.id
                }
                //发送请求给后端
                that.$axios({
                    method:"post",
                    url:url,
                    // headers: {
                    //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    // },
                    data:JSON.stringify(data)
                })
                    .then((res)=>{
                        console.log(res)
                        // that.getSearchInfo=res.data.data
                        let that = this
                        let url = "/api/findAllDept"
                        let datas1 = {}
                        that.$axios({
                            method:"post",
                            url:url,
                            data:JSON.stringify(datas1),
                            headers: {
                                "Content-Type": "application/json;charset=utf-8",
                            },
                        })
                            .then((res)=>{
                                console.log(res)
                                console.log(res.data.data)
                                that.tableData = res.data.data
                                console.log(that.getSearchInfo)
                            })
                    })
                console.log(index, row);
            },

            //搜索框
            //获取当前输入值
            chazhao(){
                let that = this
                let arr ={
                    description:that.$refs.editsousuo.value,
                }
                //获取IP地址，端口号和接口名
                let url = "/api/fuzzyQueryDept"
                that.$axios({
                    method:"post",
                    url:url,
                    data:JSON.stringify(arr)
                })
                    .then((res)=>{
                        // that.tableData.push(res.data.data)
                        that.tableData = res.data.data
                    })
            },

            rowClass({row,rowIndex}){
                return'line-height:35px'
            },
            handleEdit(index, row) {
                console.log( row);
                console.log(this.intableDatafo)
                this.dialogdetails = true;
                console.log(row)
                this.dialogdetailsInfo = {
                    id:row.id,
                    name: row.name,
                    date: row.startTime,
                    endTime: row.endTime,
                    hours: row.hours,
                    seeMan: row.seeMan,
                    address: row.address,
                };
            },

            handleCurrentChange(cpage) {
                this.currpage = cpage;
            },
            handleSizeChange(psize) {
                this.pagesize = psize;
            },
            //操作多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            info() {
                console.log("进入调用了");

                //查询数据并渲染到页面
                let that = this
                let url = "/api/findAllDept"
                let datas1 = {}
                that.$axios({
                    method:"post",
                    url:url,
                    data:JSON.stringify(datas1),
                    headers: {
                        "Content-Type": "application/json;charset=utf-8",
                    },
                })
                    .then((res)=>{
                        console.log(res)
                        console.log(res.data.data)
                        that.tableData = res.data.data
                        console.log(that.getSearchInfo)
                    })
            },



            sub() {
                console.log("进了");
                console.log(this.form);
                if (
                    this.form.endTime !== "" &&
                    this.form.startTime !== "" &&
                    this.form.why !== "" &&
                    this.form.hours !== "" &&
                    this.form.seeMan !== "" &&
                    this.form.sendMan !== ""
                ) {
                    console.log("填好了");
                    let pushObj = {
                        startTime: this.form.startTime,
                        name: this.form.who,
                        endTime: this.form.endTime,
                        hours: this.form.hours,
                        seeMan: this.form.seeMan
                    };
                    this.getSearchInfo.push(pushObj),
                        (this.form.endTime = ""),
                        (this.form.startTime = ""),
                        (this.form.name = ""),
                        (this.form.why = ""),
                        (this.form.hours = ""),
                        (this.form.seeMan = ""),
                        (this.form.sendMan = "")
                } else {
                    alert("表中有未填项，请继续填写");
                }
            },
        },
        computed: {

        },
        created() {
            this.info();
        },
    };
</script>

<style scoped>
    .tables{
        height: 100%;
        padding-top: 0;
        box-shadow: 0 0 3px #e4e4e4;
        margin-top: 20px;

    }
    .innerTable {
        box-shadow:0 0 3px 1px  #e4e4e4;
        width: 80%;
    }
    #app {
        height: 100%;
        width: 100%;
    }

    .topbtnInner {
        width: 60%;
    }

    .topbtn {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #mains {
        height: 850px;
    }

    .topInput {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        box-shadow: 0 0 3px #e4e4e4;
    }

    .topBox {
        width: 25%;
        height: 100%;
    }
    .user-list-page{
        text-align: center;
        box-shadow: 0 0 3px 1px #e4e4e4;
        line-height: 50px;
        margin-top: 20px;
        padding-top: 20px;
    }
</style>
